<script setup lang="ts">

import SvgIcon from "../Tool/svg-icon.vue";

defineProps({
    src: {
        type: String,
        default: 'https://d.musicapp.migu.cn/data/oss/resource/00/4u/js/5b4b5aa96c9b44dfb2f41a28b9cad9c9.webp'
    },
    isStart: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: '歌曲名称'
    },
    singer: {
        type: String,
        default: '歌手名称'
    }
})

</script>

<template>
    <div style="cursor: pointer;" class="line-list">
        <el-row>
            <el-col :span="22" style="display: flex; justify-content: flex-start">
                <div style="display: flex; ">
                    <el-avatar
                        style="cursor:pointer;"
                        src="https://d.musicapp.migu.cn/data/oss/resource/00/42/re/8e6902d1aaf04c6b9ef2a0fca112c64c.webp"
                        shape="square"
                        :size="60"/>
                    <div style="display: flex; flex-direction: column; justify-content: flex-start; margin-left: 5px">
                        <div>
                            <el-text tag="b" size="large">{{ title }}</el-text>
                        </div>
                        <div style="margin-top: auto">
                            <el-text tag="b" size="small" style="text-align: start">{{ singer }}</el-text>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col class="start-hidden" :span="2" style="display: flex;
                    justify-content: flex-end; align-items: center;">
                <svg-icon class="start-hidden" name="start" v-if="!isStart" />
                <svg-icon class="start-hidden" name="stop" v-else />
            </el-col>
        </el-row>
    </div>
</template>

<style scoped lang="css">
.start-hidden {
    visibility: hidden;
}

.line-list {
    padding-right: 10px;
    padding-left: 10px;
    margin: 10px 5px 15px 5px;
}

.line-list:hover {
    background-color: #f0f0f0;
}
.line-list:hover .start-hidden {
    visibility: visible;
}

</style>